<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
      
  <body>
  
	 <div class="text-center" th:fragment="pagination">
	    <ul class="pagination">
	    	<li th:class="${page.firstPage}? 'btn disabled'">
	    		<a href="#" th:href="@{ (${not page.firstPage}? ${page.url}) (page=0, size=${page.size}, sort=${page.sort}) }">First</a>
	    	</li>
	    	<li th:class="${page.firstPage}? 'btn disabled'">
	    		<a href="#" th:href="@{ (${not page.firstPage}? ${page.url}) (page=${page.number-2}, size=${page.size}, sort=${page.sort}) }">&lt;</a>
	    	</li>

			<li th:each="item : ${page.items}" th:class="${item.current}? 'active'">
				<a href="#" th:text="${item.number}" th:href="@{ ${page.url} (page=${item.number-1}, size=${page.size}, sort=${page.sort}) }">3</a>			
			</li>
			
			<li th:class="${page.lastPage}? 'btn disabled'">
				<a href="#" th:href="@{ (${not page.lastPage}? ${page.url}) (page=${page.number}, size=${page.size}, sort=${page.sort}) }">&gt;</a>			
	    	</li>
	    	<li th:class="${page.lastPage}? 'btn disabled'">
	    		<a href="#" th:href="@{ (${not page.lastPage}? ${page.url}) (page=${page.totalPages-1}, size=${page.size}, sort=${page.sort}) }">Last</a>			
	    	</li>
	    </ul>
	</div>
    
    <div class="container" th:fragment="copy">
        <hr>
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Akcasoy Shop 2014</p>
                </div>
            </div>
        </footer>
    </div>
  
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" th:fragment="header">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">My Shop</a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#" th:href="@{/}">Home</a></li>
            <li><a href="#" th:href="@{/message}">Messages</a></li>
            <li><a href="#" th:href="@{/task}">Tasks</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="/signin" th:href="@{/signin}">Sign in</a>
            </li>
            <li>
              <a href="/logout" th:href="@{/logout}">Logout</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    
    <div th:fragment="categories">
        <p class="lead">Categories</p>
        <div class="list-group">
        	<div th:each="category : ${categoryList}">
            	<a th:text="${category.name}" href="#" th:href="@{/categories/{id} (id=${category.id})}" 
            	th:class="${currentCategoryId == category.id}? 'list-group-item active' : 'list-group-item'">Elektronik</a>
            </div>
        </div>
    </div>
  
  </body>
  
</html>